<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作对象</title>
</head>
<body>
    <div id="div"></div>
    <input type="button" id="btn1" value="添加一个span到div"> <br><br><br>
    <input type="button" id="btn2" value="将加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn3" value="将加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn4" value="将雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn5" value="将雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <ul id="desc">
        <li id="jy">加油</li>
        <li id="xq">雄起</li>
    </ul>  <br><br><br>
    <input type="button" id="btn6" value="将雄起删除"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn7" value="将描述列表全部删除"> &nbsp;&nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    /*
        1. $("元素")   创建指定元素
        2. append(element)   添加成最后一个子元素，由添加者对象调用
        3. appendTo(element) 添加成最后一个子元素，由被添加者对象调用
        4. prepend(element)  添加成第一个子元素，由添加者对象调用
        5. prependTo(element) 添加成第一个子元素，由被添加者对象调用
        6. before(element)    添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
        7. after(element)     添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
        8. remove()           删除指定元素(自己移除自己)
        9. empty()            清空指定元素的所有子元素
    */

    // 按钮一：添加一个span到div
    $("#btn1").click(function () {
        let span = $("<span>span</span>");
        $("#div").append(span)
    })

    //按钮二：将加油添加到城市列表最下方
    $("#btn2").click(function () {
        //$("#city").append($("#jy"))
        $("#jy").appendTo($("#city"))
    })
    //按钮三：将加油添加到城市列表最上方
    $("#btn3").click(function () {
        //$("#city").prepend($("#jy"))
        $("#jy").prependTo($("#city"))
    })

    //按钮四：将雄起添加到上海下方
    $("#btn4").click(function () {
        $("#sh").after($("#xq"))
    })

    //按钮五：将雄起添加到上海上方
    $("#btn5").click(function () {
        $("#sh").before($("#xq"))
    })
    //按钮六：将雄起删除
    $("#btn6").click(function () {
        $("#xq").remove()
    })
    //按钮七：将描述列表全部删除
    $("#btn7").click(function () {
        $("#desc").empty()
    })
</script>
</html>